<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样例展示</title>
    <style>
        div{
            border: 1px solid red;
        }
        .left{width: 20%;height: 500px;float: left;}/*浮动  浮动不占空间 清除浮动之后才占空间*/
        .center{width: 59%; height: 500px; float: left}
        .right{  width: 20%;height: 500px;float: left;}
        .footer{clear: both; background: greenyellow; } /*清除浮动  背景颜色*/
    </style>
</head>
<body>
<div>top</div>
<div>navibar</div>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
<div class="footer">footer</div>




</body>
</html>